<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

    <head>
        <title>Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8"/>
        <meta name="keywords" content=""/>
        <script>
            addEventListener("load", function () {
                setTimeout(hideURLbar, 0);
            }, false);

            function hideURLbar() {
                window.scrollTo(0, 1);
            }

        </script>
        <!-- Custom Theme files -->
        <link th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet" media="all">
        <!-- shop css -->
        <link th:href="@{/css/shop.css}" type="text/css" rel="stylesheet" media="all">
        <link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
        <!-- Owl-Carousel-CSS -->
        <link th:href="@{/css/style.css}" type="text/css" rel="stylesheet" media="all">
        <!-- font-awesome icons -->
        <link th:href="@{/css/fontawesome-all.min.css}" rel="stylesheet">
        <!-- //Custom Theme files -->
        <!-- online-fonts -->
        <link href="http://fonts.googleapis.com/css?family=Elsie+Swash+Caps:400,900" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i"
              rel="stylesheet">
        <!-- //online-fonts -->
    </head>

    <body>
        <!-- header -->
        <header>
            <div class="container">
                <!-- top nav -->
                <nav class="top_nav d-flex pt-3 pb-1">
                    <!-- logo -->
                    <h1>
                        <a class="navbar-brand" href="index.html">fh
                        </a>
                    </h1>
                    <!-- //logo -->
                    <div class="w3ls_right_nav ml-auto d-flex">
                        <!-- search form -->
                        <form class="nav-search form-inline my-0 form-control" action="#" method="post">
                            <input type="text">
                            <input class="btn btn-outline-secondary  ml-3 my-sm-0" type="submit" value="Search">
                        </form>
                        <!-- search form -->
                        <div class="nav-icon d-flex">
                            <!-- sigin and sign up -->
                            <a class="text-dark login_btn align-self-center mx-3" href="#myModal_btn"
                               data-toggle="modal" data-target="#myModal_btn">
                                <i class="far fa-user"></i>
                            </a>
                            <!-- sigin and sign up -->
                            <!-- shopping cart -->
                            <div class="cart-mainf">
                                <div class="hubcart hubcart2 cart cart box_1">
                                    <form action="#" method="post">
                                        <input type="hidden" name="cmd" value="_cart">
                                        <input type="hidden" name="display" value="1">
                                        <button class="btn top_hub_cart mt-1" type="submit" name="submit" value=""
                                                title="Cart">
                                            <i class="fas fa-shopping-bag"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <!-- //shopping cart ends here -->
                        </div>
                    </div>
                </nav>
                <!-- //top nav -->
                <!-- bottom nav -->
                <nav class="navbar navbar-expand-lg navbar-light justify-content-center">
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </nav>
                <!-- //bottom nav -->
            </div>
            <!-- //header container -->
        </header>
        <!-- //header -->
        <!-- banner -->

        <section class="tabs_pro py-md-5 pt-sm-3 pb-5">
            <h5 class="head_agileinfo text-center text-capitalize pb-5">
                <span>s</span>mart clothing</h5>
            <div class="tabs tabs-style-line pt-md-5">

                <!-- Content Panel -->
                <div id="clothing-nav-content" class="tab-content py-sm-5">
                    <div role="tabpanel" class="tab-pane fade show active" id="women" aria-labelledby="women-tab">
                        <div style="display: flex;flex-direction: row;flex-wrap: wrap;width: 100%">

                            <!--content-start-->

                            <div class="item" th:each="product:${productList}" style="width: 25%;height: auto">
                                <!-- card -->
                                <div class="card product-men p-3">
                                    <div class="men-thumb-item">
                                        <img th:src="${product.getProductImage()}" alt="img" class="card-img-top">
                                        <div class="men-cart-pro">
                                            <div class="inner-men-cart-pro">
                                                <a th:href="@{/product/product_id/}+${product.getProductId()}" class="link-product-add-cart">Quick View</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- card body -->
                                    <div class="card-body  py-3 px-2">
                                        <h5 class="card-title text-capitalize" th:text="${product.getProductName()}"></h5>
                                        <div class="card-text d-flex justify-content-between">
                                            <p class="text-dark font-weight-bold" th:text="${product.getMiaoshaPrice()}"></p>
                                            <p class="line-through" th:text="${product.getNormalPrice()}"></p>
                                        </div>
                                    </div>
                                </div>
                                <!-- //card -->
                            </div>

                            <!--content-end-->
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- signin Modal -->
        <!-- js -->
        <script th:src="@{/js/jquery-2.2.3.min.js}"></script>
        <!-- //js -->
        <!-- script for show signin and signup modal -->
        <script>
            $(document).ready(function () {
                $("#myModal_btn").modal();
            });

        </script>
        <!-- //script for show signin and signup modal -->
        <!-- smooth dropdown -->
        <script>
            $(document).ready(function () {
                $('ul li.dropdown').hover(function () {
                    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
                }, function () {
                    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
                });
            });

        </script>
        <!-- //smooth dropdown -->
        <!-- script for password match -->
        <!-- script for password match -->
        <!-- Banner Responsiveslides -->
        <script th:src="@{/js/responsiveslides.min.js}"></script>
        <script>
            // You can also use "$(window).load(function() {"
            $(function () {
                // Slideshow 4
                $("#slider3").responsiveSlides({
                    auto: false,
                    pager: true,
                    nav: false,
                    speed: 500,
                    namespace: "callbacks",
                    before: function () {
                        $('.events').append("<li>before event fired.</li>");
                    },
                    after: function () {
                        $('.events').append("<li>after event fired.</li>");
                    }
                });

            });

        </script>
        <!-- // Banner Responsiveslides -->
        <!-- Product slider Owl-Carousel-JavaScript -->
        <script th:src="@{/js/owl.carousel.js}"></script>
        <script>
            var owl = $('.owl-carousel');
            owl.owlCarousel({
                items: 4,
                loop: false,
                margin: 10,
                autoplay: false,
                autoplayTimeout: 5000,
                autoplayHoverPause: false,
                responsive: {
                    320: {
                        items: 1,
                    },
                    568: {
                        items: 2,
                    },
                    991: {
                        items: 3,
                    },
                    1050: {
                        items: 4
                    }
                }
            });

        </script>
        <!-- //Product slider Owl-Carousel-JavaScript -->
        <!-- cart-js -->
        <script th:src="@{/js/minicart.js}">
        </script>
        <script>
            hub.render();

            hub.cart.on('new_checkout', function (evt) {
                var items, len, i;

                if (this.subtotal() > 0) {
                    items = this.items();

                    for (i = 0, len = items.length; i < len; i++) {
                    }
                }
            });

        </script>
        <!-- //cart-js -->
        <!-- start-smooth-scrolling -->
        <script th:src="@{/js/move-top.js}"></script>
        <script th:src="@{/js/easing.js}"></script>
        <script>
            jQuery(document).ready(function ($) {
                $(".scroll").click(function (event) {
                    event.preventDefault();

                    $('html,body').animate({
                        scrollTop: $(this.hash).offset().top
                    }, 1000);
                });
            });

        </script>
        <!-- //end-smooth-scrolling -->
        <!-- smooth-scrolling-of-move-up -->
        <script>
            $(document).ready(function () {
                $().UItoTop({
                    easingType: 'easeOutQuart'
                });

            });

        </script>
        <!--<script src="js/SmoothScroll.min.js"></script>-->
        <!-- //smooth-scrolling-of-move-up -->
        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script th:src="@{/js/bootstrap.js}"></script>
    </body>

</html>
